<template>
  <div v-show="doctorInfo" class="doctorMsg-container">
    <div class="doctorMsg-box">
      <div class="img-part">
        <img :src="docImg" alt="">
      </div>
      <div class="text-part">
        <div class="name">{{doctorInfo.name}}</div>
        <div class="desc">
          <span class="hos">{{doctorInfo.hospital}}</span>
          <span class="group-doc">{{doctorInfo.section}}</span>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import docImg from '@/assets/images/mdoctor.png'
export default {
  created () {
    
  },
  data () {
    return {
      docImg
    }
  },
  computed: {
    doctorInfo () {
      let doctorInfo = this.$store.state.doctorInfo
      return doctorInfo
    }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">
  .doctorMsg-container
    background: #ffffff
    padding: 0.625rem 0.625rem 0 0.625rem
    // border-radius: 5px
    .doctorMsg-box
      border-bottom: 1px solid #ddd
      padding-bottom: 10px
      display: flex
      .img-part
        width: 55px
        height: 55px
        // border-radius: 50%
        overflow: hidden
        vertical-align: top
        img
          width: 100%
      .text-part
        flex: 1
        margin-left: 10px
        .name
          font-size: 1.1875rem
          color: #333
        .desc
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
          font-size: 0.9375rem
          color: #666
</style>
